﻿@model PProdAPI.Models.production

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
  @Scripts.Render("~/bundles/jqueryui")
  <script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.3.0.js")"></script> 
  <script type="text/javascript">
      
        $(function () {
            $("#date").datepicker();
        });

        function ItemsViewModel() {
            var self = this;
            self.productions = ko.observableArray();
            self.items = ko.observableArray();
            self.employees = ko.observableArray();
            self.machines = ko.observableArray();
            self.shifts = ko.observableArray();



            var baseUri = '@ViewBag.ApiUrl';

            self.create = function (formElement) {
                // If the form data is valid, post the serialized form data to the web API.
                $(formElement).validate();
                if ($(formElement).valid()) {
                    $.post(baseUri, $(formElement).serialize(), null, "json")
                .done(function (o) {
                    self.productions.push(o);
                });
                }
            }

            self.update = function (production) {
                $.ajax({ type: "PUT", url: baseUri + '/' + production.Id, data: production });
            }

            self.remove = function (production) {
                // First remove from the server, then from the view-model.
                $.ajax({ type: "DELETE", url: baseUri + '/' + production.Id })
            .done(function () { self.productions.remove(production); });
            }

            $.getJSON(baseUri, self.productions);
            $.getJSON('@ViewBag.ItemUrl', self.items);
            $.getJSON('@ViewBag.MachineUrl', self.machines);
            $.getJSON('@ViewBag.ShiftUrl', self.shifts);
            $.getJSON('@ViewBag.EmployeeUrl', self.employees);

        }


        $(document).ready(function () {
            ko.applyBindings(new ItemsViewModel());
        })
        
  </script>
}

@{
    ViewBag.Title = "Production Entry";
}

<h2>Admin</h2>
<div class="content">
    <div class="float-top">
    <h2>Add New Item</h2>
    <form id="addItem" data-bind="submit: create">
        <fieldset>
        @Html.ValidationSummary(true)    
        
        <div class="editor-field">Date<input  id='date' name="date"/></div>
        <div class="editor-field">Employee<select id="employeeId" name="employeeId" data-bind="options: employees, optionsText: 'Name', optionsValue: 'Id', optionsCaption: 'Choose...'"></select></div>
        <div class="editor-field">Shift<select id='shiftId' name='shiftId' data-bind="options: shifts, optionsText: 'NickName', optionsValue: 'Id', optionsCaption: 'Choose...'"></select></div>
        <div class="editor-field">Machine<select id='machineId' name='machineId' data-bind="options: machines, optionsText: 'MachineName', optionsValue: 'Id', optionsCaption: 'Choose...'"></select></div>
        <div class="editor-field">Item<select id='itemId' name='itemId' data-bind="options: items, optionsText: 'ItemID', optionsValue: 'Id', optionsCaption: 'Choose...'"></select></div>
        <div class="editor-field">Amount Produced<input id='amount' name="amount"></div>
        <div class="editor-field">Production Hours<input id='actualHours' name="actualHours"/></div>
        <div class="editor-field">Scheduled Hours<input id='scheduledHours' name="scheduledHours"/></div>
        <input type="submit" value="Save" />
            </p>
        </fieldset>
    </form>
    </div>
    <div class="float-bottom">
         <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Created</th>
                    <th>Date</th>
                    <th>Employee</th>
                    <th>Shift</th>
                    <th>Machine</th>
                    <th>Item</th>
                    <th>AmountProduced</th>
                    <th>Production Hours</th>
                    <th>Schduled Hours</th>
                    <th>Remove</th>
                 </tr>
            </thead>
            <tbody data-bind="foreach: productions">
                <tr>
                    <td data-bind="text: Id"></td>
                    <td data-bind="text: createdate"></td>
                    <td data-bind="text: date"></td>
                    <td data-bind="text: employee.Name"></td>
                    <td data-bind="text: shift.ShiftName"></td>
                    <td data-bind="text: machine.MachineName"></td>
                    <td data-bind="text: item.Id"></td>
                    <td data-bind="text: amount"></td>
                    <td data-bind="text: actualHours"></td>
                    <td data-bind="text: scheduledHours"></td>
                    <td><input type="button" value="Remove" data-bind="click: $root.remove"/></td>
                </tr>
            </tbody>
        </table>
    </div>

    
</div>